<script setup lang="ts"></script>

<template>
    <router-view v-slot="{ Component, route }">
        <transition name="slide-fade" mode="in-out">
            <keep-alive max="1">
                <component :is="Component" :key="route.fullPath" />
            </keep-alive>
        </transition>
    </router-view>
</template>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        /* color: #fff; */
    }
    body {
        border: 0;
        margin: 0;
        padding: 0;
        /* elementPlus需要设置字体大小，不然ElMessage的图标会小了 */
        font-size: 14px;
    }
    ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 8px;
        /* background: #f1f1f1; */
    }
    ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        background: rgb(179, 178, 178);
    }
    ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        background: rgba(0, 0, 0, 0); */
    }
    ::-webkit-scrollbar-button {
        /* 滚动条两端的按钮 */
        /* // background: #f1f1f1; */
        width: 0;
        height: 0;
    }
    /* 当滑块悬停或活动时，可以添加更多样式 */
    ::-webkit-scrollbar-thumb:hover {
        background: rgb(148, 148, 148); /* 设置滑块在悬停状态下的背景颜色 */
    }
</style>
<style lang="scss" scoped>
    /*
      进入和离开动画可以使用不同
      持续时间和速度曲线。
    */
    /* 进入时的过渡效果 */
    .slide-fade-enter-active {
        transition: all 0.3s ease-out;
    }

    /* 离开时的过渡效果 */
    .slide-fade-leave-active {
        transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
    }

    /* 从什么位置进入和从什么位置出去 */
    .slide-fade-enter-from,
    .slide-fade-leave-to {
        transform: translateX(-20px);
        opacity: 0;
    }
</style>
